<template>
    <nut-dialog no-cancel-btn title="购票须知" v-model:visible="visible3">
        <template #default>
            <div style="text-align: left;color: #333333;" v-html="texting1"></div>
            <div style="text-align: left;color: #333333;" v-html="texting2">

            </div>
            <div style="text-align: left;color: #333333;" v-html="texting3">
            </div>
            <div style="display: flex;margin-top: 10px;justify-content: flex-start;align-items: center;">
                <nut-checkbox v-model="isAgreeAccord" style="margin-right: 0;"></nut-checkbox>
                <div>我已阅读以上购票须知内容</div>

            </div>
        </template>
        <template #footer>
            <div style="display: flex;flex-direction: column;width: 100%;">

                <nut-button type="primary" @click="onOk" :disabled="!isAgreeAccord" block size="small">继续购票</nut-button>
                <nut-button type="default" @click="visible3 = false" style="margin-top: 10px;border: 0;" block
                    size="small">暂不购票</nut-button>

            </div>
        </template>

    </nut-dialog>
    <div class="home-footer-container">
        <div class="box">
            <div class="left">
                <div class="key">待付款</div>
                <div class="price">￥{{ ((price * num) / 100).toFixed(2) }}</div>

            </div>
            <div class="right">
                <nut-button block type="primary" @click="handleClick">立即支付</nut-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import Taro from "@tarojs/taro";
import { toRefs, ref, computed } from 'vue'

const emit = defineEmits(["onPay"]);
const props = defineProps({
    price: {
        type: Number,
        required: true
    },
    num: {
        type: Number,
        required: true

    },
    phone: {
        required: true
    }

})
const texting1 = ref(`1、该全国通用券全部用于《传说》在万达影城的填场活动。`)
const texting2 = ref(`2、购买后本券由万达根据张艺兴资讯台统一选座填场，个人无权选座，一经购买<text style="color: #ee0a24;">无法退款。</text>`)
const texting3 = ref(`3、在我的订单-已完成里可查看该券所兑换的电影票信息（所填的影院，场次等）。兑换后自动与其他购票平台同步，可去核对占位。`)


const isAgreeAccord = ref(false)
const { price, num, phone } = toRefs(props)
const formatPhoneNumber = computed(() => {
    return () => {


    }

})
const visible3 = ref(false)
const skipOrder = () => {
    Taro.navigateTo({
        url: "/pages/order/index",
    });
};
const handleClick = () => {
    let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
    if (!reg.test(phone.value)) {

        Taro.showToast({
            title: "请输入正确的手机号",
            icon: "none",
            duration: 2000,
        });
        return;
    }
    if (!phone.value) {

        Taro.showToast({
            title: "手机号不能为空",
            icon: "none",
            duration: 2000,
        });
        return;
    }


    visible3.value = true
    // 
};
const onOk = () => {
    emit("onPay");
}
</script>
<style lang="scss">
.home-footer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    //   height: 50px;
    background-color: #fff;
    padding: 20px 30px;

    .box {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            flex: 1;
            display: flex;
            align-items: center;

            .price {
                color: #ee0a24;
                margin-left: 20px;
                font-size: 34px;
            }

            .key {
                color: #858a99;
                font-size: 26px;
            }

            //   justify-content: space-between;

        }

        .right {
            flex: 1;
        }
    }
}
</style>
